<template>
    <div class="dashboard-container">
        <div class="dashboard-text">name:{{name}}</div>
        <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div>

        <el-row :gutter="10">
            <el-col>
                <audio :src="aa" ref="audio" controls="controls"></audio>
            </el-col>
            <el-col>
                <button @click="play">播放</button>
                <button @click="pause">暂停</button>
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col>
                <button @click="play2">播放2</button>
                <button @click="pause2">暂停2</button>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col>
                <button @click="goEtc">其他</button>
                <button @click="go404">404</button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import wo from '@/assets/music/wo.mp3'

export default {
  name: 'dashboard',
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  data() {
    return {
      aa: wo,
      audio: new Audio()
    }
  },
  methods: {
    // 播放
    play() {
      this.$refs.audio.load()
      this.$refs.audio.play()
      this.isPlay = true
    },
    // 播放2
    play2() {
      this.audio.src = this.aa
      this.audio.play()
    },
    // 暂停
    pause() {
      this.$refs.audio.pause()
    },
    // 暂停2
    pause2() {
      this.audio.pause()
    },
    // 暂停
    goEtc() {
      this.$router.push({ name: 'userTemplate', params: { reportUrl: 'http://baidu.com', reportType: 0 }})
    },
    // 暂停
    go404() {
      this.$router.push({ path: '404' })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .el-col {
        border-radius: 4px;
    }

    .dashboard {
        &-container {
            margin: 30px;
        }

        &-text {
            font-size: 30px;
            line-height: 46px;
        }
    }
</style>
